<template>
 <div >
   <header class="bar bar-nav" >
    <a class="button button-link button-nav pull-left" v-link="{path: '/travel', replace: false}">
    <span class="icon icon-left"></span>
    </a>
    <h1 class="title">活动报名</h1>
  </header>
  <div class="content">
   <div>
   <img src="../../assets/img/2.jpg" class="img-responsive" >
   </div>
    <div class="card">
    <validator name="validation1">
    <div class="card-content">
      <div class="card-content-inner list-block" >
  
       <ul>
         <li>
          <div class="item-content">
              <div class="item-inner">
                  <div class="item-title label">活动名称 </div>
                  <div class="item-input">
                      <input id="age" type="text" name="price" placeholder="名称" readonly="true" v-model="name">
                  </div>
              </div>
          </div>
      </li>
         <li>
          <div class="item-content">
              <div class="item-inner">
                  <div class="item-title label">活动时间： </div>
                  <div class="item-input">
                      <input id="age" type="text" name="code" placeholder="活动时间" v-model="datetime" readonly="true">
		  </div>
              </div>
          </div>
      </li>
             <li>
          <div class="item-content">
              <div class="item-inner">
                  <div class="item-title label">报名费用：</div>
                  <div class="item-input">
                      <input id="age" type="text" name="code" placeholder="报名费用" v-model='money'  readonly="true">
		  </div>
              </div>
          </div>
      </li>
       </ul>
      </div>
    </div>
    <div class="card-footer">
         <a  class='button button-success button-fill' v-link="{path: '/travel/profile', replace: false}">上一步</a>
         <a class='button button-success button-fill create-actions1' v-link="{path: '/user/pay2', replace: false, query: {name: name, money: money}}"  @click="doflag($validation1.invalid)">确认付款</a>
    </div>
   </validator>
   </div>
</div>

</template>

<script>
import $ from 'zepto'
import VNav from '../../components/Nav'
import VButton from '../../components/Button'
import VIcon from '../../components/Iconfont'
import VTabs from '../../components/Tabs'
import VTab from '../../components/Tab'
import VLayer from '../../components/PullToRefreshLayer'
import VCardContainer from '../../components/Card'
import Card from '../../components/CardItem'

export default {
  route: {
    data () {
      this.$set('name', $.travel.name)
      this.$set('datetime', $.travel.datetime)
      this.$set('money', $.travel.money)
    }
  },
  ready () {
    $.init()
  },
  data () {
    return {
      name: '',
      datetime: '',
      money: ''
    }
  },
  methods: {
    doflag (data) {
      console.log('enter....')
      this.flag = data
    }
  },
  components: {
    VNav,
    VButton,
    VIcon,
    VTabs,
    VTab,
    VLayer,
    VCardContainer,
    Card
  }
}
</script>

<style scoped>
img{
 width:100%;
 height:6rem;
}
.card{
 margin:0px;
}
.card-header{
   color:black;
}
.card-content-inner{
  line-height:2rem;
  font-size:16px;
}
</style>
